<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>VDI查看器</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
  </head>
  <body>
    <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">已挂载</h3>
    </div>
    <div class="panel-body" id="mounted_list">
      
    </div>
  </div>

    <form class="form-inline">
      <div class="form-group">
        <label>VDI文件</label>
        <div class="input-group file-input" data-accept=".vdi">
          <input id="vdiFileInput" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
        </div>
    </div>
    <div class="form-group">
        <label></label>
        <button id="mountBtn" type="button" class="btn btn-primary">挂载</button>
    </div>
    </form>

    <script id="mounted-list" type="text/html">
    <ul>
      {{each data item}}
        <li>{{item.name}} <a href="#" class="unmount-link" data-id="{{item.id}}">卸载</a></li>
        {{/each}}
      </ul>
  </script>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript" src="../../js/fileinput.js"></script>
    <script type="text/javascript">
  
  var getMountedList=function(check){
    var mountedList=localStorage.getItem('user_mounted_vdi_list');
    if(mountedList==null||mountedList==''){
      mountedList=[];
    }else{
      mountedList=$.parseJSON(mountedList);
    }
    if(!check){
      return mountedList;
    }

    var againSet=false;
    var newMountList=[];
    var fs=require('fs');
    for(var i=0;i<mountedList.length;i++){
      var id=mountedList[i].id;
      if(!fs.existsSync(`/mnt/${id}`)){
        againSet=true;
        continue;
      }else{
        newMountList.push(mountedList[i]);
      }
    }
    if(againSet){
      localStorage.setItem('user_mounted_vdi_list',JSON.stringify(newMountList));
    }
    return newMountList;
  };

  var renderMountedList=function(check){
    $("#mounted_list").html(template("mounted-list",{data:getMountedList(check)}));
  };

  var setMountedList=function(mountedList){
    localStorage.setItem('user_mounted_vdi_list',JSON.stringify(mountedList));
      renderMountedList();
  };

  renderMountedList(true);

  $("#mountBtn").click(function(){
    var id=window.top.app.createUUID();
    var vdiFile=$("#vdiFileInput").val();
    var fileName=vdiFile.substring(vdiFile.lastIndexOf('/')+1);
    window.top.app.runAsRoot(`mkdir /mnt/${id}_vdi && sudo vdfuse -f "${vdiFile}" /mnt/${id}_vdi && sudo mkdir /mnt/${id} && sudo mount /mnt/${id}_vdi/Partition1 /mnt/${id} && nautilus /mnt/${id}`);

    var mountedList=getMountedList();
    mountedList.push({"id":id,"name":fileName,"file":vdiFile});
    setMountedList(mountedList);
  });

  $('body').on('click',"a.unmount-link",function(){
    if(!$(this).is(".disabled")){
      var id=$(this).data("id");
      window.top.app.runAsRoot(`umount /mnt/${id} && sudo rmdir /mnt/${id} && sudo umount /mnt/${id}_vdi && sudo rmdir /mnt/${id}_vdi`);

      $(this).text("已卸载");
      $(this).addClass("disabled");
    }
  }); 
    </script>
  </body>
</html>
